<template>
	<el-container v-loading="loading">
		<el-main>
			<el-card class="!border-none" shadow="never">
				<el-alert type="warning" title="温馨提示：填写微信公众号开发配置，请前往微信公众平台申请服务号并完成认证" :closable="false" show-icon />
			</el-card>
			<el-card shadow="never" header="微信公众号">
				<el-col :lg="{ span: 8, offset: 1 }">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="公众号名称" width="120">
							<el-input v-model="config.name" placeholder="公众号名称"></el-input>
						</el-form-item>
						<el-form-item label="原始ID" width="120">
							<el-input v-model="config.original_id" placeholder="请输入原始ID"></el-input>
						</el-form-item>
						<el-form-item label="公众号二维码">
							<sc-upload v-model="config.qr_code"></sc-upload>
							<div class="el-form-item-msg">建议尺寸：宽400px*高400px。jpg，jpeg，png格式</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="公众号开发者信息" style="margin-top: 15px;">
				<el-col :lg="{ span: 8, offset: 1 }">
					<el-form ref="form" :rules="rules" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="AppID" width="120" prop="app_id">
							<el-input v-model="config.app_id" clearable placeholder="请输入AppID"></el-input>
						</el-form-item>
						<el-form-item label="AppSecret" width="120" prop="app_secret">
							<el-input v-model="config.app_secret" clearable placeholder="请输入AppSecret"></el-input>
						</el-form-item>
						<el-form-item>
							<div class="el-form-item-msg">
								小程序账号登录微信公众平台，点击开发>开发设置->开发者ID，设置AppID和AppSecret
							</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="服务器配置" style="margin-top: 15px;">
				<el-col :lg="{ span: 9, offset: 0 }">
					<el-form ref="form" :model="config" label-width="160px" style="margin-top: 20px;">
						<el-form-item label="request合法域名" width="120" style="display: flex;">
							<el-input v-model="config.url" disabled style="width: 83%;"></el-input>
							<el-button v-copy="config.url" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击开发>基本配置>服务器配置，填写服务器地址（URL）
							</div>
						</el-form-item>
						<el-form-item label="Token" width="120" style="display: flex;">
							<el-input v-model="config.token" style="width: 83%;"></el-input>
							<div class="el-form-item-msg">
								登录微信公众平台，点击开发>基本配置>服务器配置，设置令牌Token。不填默认为“likeshop”
							</div>
						</el-form-item>
						<el-form-item label="EncodingAESKey" width="120" style="display: flex;">
							<el-input v-model="config.encoding_aes_key" style="width: 83%;"></el-input>
							<div class="el-form-item-msg">
								消息加密密钥由43位字符组成，字符范围为A-Z,a-z,0-9
							</div>
						</el-form-item>
						<el-form-item label="消息加密方式" width="120" style="display: flex;">
							<el-radio-group class="flex-col !items-start min-w-0" v-model="config.encryption_type">
								<el-radio :label="1">
									明文模式 (不使用消息体加解密功能，安全系数较低)
								</el-radio>

								<el-radio :label="2">
									兼容模式 (明文、密文将共存，方便开发者调试和维护)
								</el-radio>
								<el-radio :label="3">
									安全模式（推荐） (消息包为纯密文，需要开发者加密和解密，安全系数高)
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
			<el-card shadow="never" header="功能设置" style="margin-top: 15px;">
				<el-col :lg="{ span: 8, offset: 1 }">
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="业务域名" width="120" style="display: flex;">
							<el-input v-model="config.business_domain" disabled style="width: 83%;"></el-input>
							<el-button v-copy="config.business_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写业务域名
							</div>
						</el-form-item>
					</el-form>
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="JS接口安全域名" width="120" style="display: flex;">
							<el-input v-model="config.js_secure_domain" disabled style="width: 83%;"></el-input>
							<el-button v-copy="config.js_secure_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写JS接口安全域名
							</div>
						</el-form-item>
					</el-form>
					<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
						<el-form-item label="网页授权域名" width="120" style="display: flex;">
							<el-input v-model="config.web_auth_domain" disabled style="width: 83%;"></el-input>
							<el-button v-copy="config.web_auth_domain" type="info" style="margin-left: 10px;">复制</el-button>
							<div class="el-form-item-msg">
								登录微信公众平台，点击设置>公众号设置>功能设置，填写网页授权域名
							</div>
						</el-form-item>
					</el-form>
				</el-col>
			</el-card>
		</el-main>
		<el-footer style="height:51px;text-align: center;">
			<el-button type="primary" @click="setConfig()">保存</el-button>
		</el-footer>
	</el-container>
</template>

<script>
export default {
	name: 'system',
	data() {
		return {
			config: {},
			rules: {
				app_id: [
					{ required: true, message: '请输入AppID' }
				],
				app_secret: [
					{ required: true, message: '请输入AppSecret' }
				],
			},
			isSaveing: false
		}
	},
	mounted() {
		this.getConfig()
	},
	methods: {
		async setConfig() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.setting.wx_oa.setConfig.post(this.config);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				}
			})

		},
		async getConfig() {
			var res = await this.$API.setting.wx_oa.getConfig.get()
			if (res.code == 1) {
				this.config = res.data
			}
		}
	}
}
</script>

<style>
.form-tips {
	@apply text-tx-secondary text-xs leading-6 mt-1;
}
</style>
